<template>
  <el-card>
    <!-- 表格 -->
    <el-table row-key="id" :data="skuInfoList" stripe border style="width: 100%" v-loading="loading">
      <!-- 序号 -->
      <el-table-column align="center" type="index" label="序号" width="80">
        <template v-slot="{ row, $index }">
          {{ pageSize * (current - 1) + ($index + 1) }}
        </template>
      </el-table-column>
      <!-- 名称 -->
      <el-table-column prop="skuName" label="名称" />
      <!-- 描述 -->
      <el-table-column prop="skuDesc" label="描述" />
      <!-- 默认图片 -->
      <el-table-column prop="xxx" label="默认图片">
        <template v-slot="{ row, $index }">
          <el-image :src="row.skuDefaultImg" style="width: 80px; height: 80px"></el-image>
        </template>
      </el-table-column>
      <!-- 重量 -->
      <el-table-column prop="weight" label="重量" />
      <!-- 价格 -->
      <el-table-column prop="price" label="价格" />
      <!-- 操作-->
      <el-table-column label="操作" align="center">
        <template #default="{ row, $index }">
          <el-button size="default" :icon="Top" v-if="row.isSale == 0" @click="changeSale(row.id, true)"></el-button>
          <el-button size="default" :icon="Bottom" type="success" v-else @click="changeSale(row.id, false)"></el-button>
          <el-button size="default" :icon="Edit" type="primary" @click="ElMessage.warning('敬请期待')"></el-button>
          <el-button size="default" :icon="InfoFilled" type="info" @click="showDrawer(row.id)"></el-button>
          <el-button size="default" :icon="Delete" type="danger" @click="deleteSkuInfo(row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      v-model:currentPage="current"
      v-model:page-size="pageSize"
      :page-sizes="[10, 15, 20]"
      :disabled="disabled"
      layout=" prev, pager, next, jumper,->,sizes,total"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
  <!-- 抽屉组件 -->
  <el-drawer v-model="isShowDrawer" :show-close="false" :with-header="false" size="50%">
    <!-- 名称 -->
    <el-row>
      <el-col :span="5">名称：</el-col>
      <el-col :span="19">{{ skuInfo?.skuName }}</el-col>
    </el-row>
    <hr />
    <!-- 描述 -->
    <el-row>
      <el-col :span="5">描述：</el-col>
      <el-col :span="19"> {{ skuInfo?.skuDesc }}</el-col>
    </el-row>
    <hr />
    <!-- 价格 -->
    <el-row>
      <el-col :span="5">价格：</el-col>
      <el-col :span="19">{{ skuInfo?.price }}</el-col>
    </el-row>
    <hr />
    <!-- 平台属性 -->
    <el-row>
      <el-col :span="5">平台属性：</el-col>
      <el-col :span="19">
        <div v-if="skuInfo?.skuAttrValueList && skuInfo?.skuAttrValueList.length > 0">
          <el-tag v-for="val in skuInfo.skuAttrValueList" :key="val.attrId" style="margin-right: 5px" type="success">{{ val.attrName + "_" + val.valueName }}</el-tag>
        </div>
        <div v-else>暂无数据</div>
      </el-col>
    </el-row>
    <hr />
    <!-- 销售属性 -->
    <el-row>
      <el-col :span="5">销售属性：</el-col>
      <el-col :span="19">
        <div v-if="skuInfo?.skuSaleAttrValueList && skuInfo.skuSaleAttrValueList.length > 0">
          <el-tag type="success" v-for="attr in skuInfo.skuSaleAttrValueList" :key="attr.id">
            {{ attr.saleAttrName + "-" + attr.saleAttrValueName }}
          </el-tag>
        </div>
        <div v-else>暂无数据</div>
      </el-col>
    </el-row>
    <hr />
    <!-- 商品图片 -->
    <el-row>
      <el-col :span="5">商品图片：</el-col>
      <el-col :span="19">
        <el-carousel height="400px" style="width: 400px">
          <el-carousel-item v-for="item in skuInfo?.skuImageList" :key="item.id">
            <el-image :src="item.imgUrl" style="width: 100%; height: 100%"></el-image>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
  </el-drawer>
</template>
<script lang="ts">
export default {
  name: "Sku",
};
</script>
<script lang="ts" setup>
import type { SkuListModel, SkuModel } from "@/api/product/model/skuModel";
import { reqCancelSale, reqDeleteSkuById, reqGetSkuInfoBySkuId, reqGetSkuInfoList, reqOnSale } from "@/api/product/sku";
import { Top, Bottom, Edit, InfoFilled, Delete } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { ref, watch, onMounted } from "vue";
// 定义加载效果的loading
const loading = ref<boolean>(false);
// 定义表格的数组
const skuInfoList = ref<SkuListModel>([]);
// 页码
const current = ref<number>(1);
// 每页的条数
const pageSize = ref<number>(10);
// 总条数
const total = ref<number>(0);
// 定义分页需要的数据
const disabled = ref(false);
// 定义一个sku对象
const skuInfo = ref<SkuModel>();
// 定义一个是否显示抽屉的标识
const isShowDrawer = ref<boolean>(false);

// 定义一个方法 用来获取spu列表的数据  内部异步请求 调用接口函数
const getSkuInfoList = async (page: number = current.value, limit: number = pageSize.value) => {
  // 设置加载效果的显示
  loading.value = true;
  // 重新修订current 和 pageSize 的值
  current.value = page;
  pageSize.value = limit;
  const result = await reqGetSkuInfoList(page, limit);
  // 存储spu列表的数组数据
  skuInfoList.value = (result as any).records;
  // 设置总条数
  total.value = (result as any).total;
  // 设置记载效果的隐藏
  loading.value = false;
};
// 定义页码和pageSize切换时触发的回调函数
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  getSkuInfoList(val, pageSize.value);
};
// 挂载完毕之后获取数据
onMounted(() => {
  getSkuInfoList();
});

// 上下架
const changeSale = async (id: number, flag: boolean) => {
  if (flag) {
    // 上架
    await reqOnSale(id);
  } else {
    await reqCancelSale(id);
  }
  ElMessage.success(flag ? "上架成功" : "下架成功");
  getSkuInfoList();
};

// 删除的回调
const deleteSkuInfo = async (id: number) => {
  await reqDeleteSkuById(id);
  ElMessage.success("删除成功");
  getSkuInfoList(1);
};

// 定义点击抽屉按钮的回调
const showDrawer = async (id: number) => {
  isShowDrawer.value = true;
  skuInfo.value = await reqGetSkuInfoBySkuId(id);
};
</script>
<style scoped></style>
